<template>
 <div class="mockdemo">
     <div :style="content">
        <p>姓名：{{data.name}}</p>
        <p>ID：{{data.id}}</p>
        <p>自我介绍：{{data.info}}</p>
        <div class="btn" @click='toPage'>
          点我进入组件demo
        </div>
     </div>
 </div>
</template>

<script>
import axios from "axios";
export default {
  name: "mockdemo",
  data() {
    return {
      data: {
        
      },
      content:''
    };
  },
  methods: {
    toPage() {
      this.$router.push({
        path: "/components"
      });
    }
  },
  mounted(){
    this.content={
      height:window.screen.height+'px'
    }
  },
  components: {},
  async mounted() {
    const datatemp = await axios.get("/api/v1/birds/about");
    this.data = JSON.parse(datatemp.data.Data);
    // .then((response) =>{
    //   this.data=JSON.parse(response.data.Data);
    // })
    // .catch(function(error) {
    //   console.log(error);
    // });
    console.log(this.data);
  }
};
</script>

<style scoped lang="scss">
@import "../styles/common.scss";
.mockdemo {
  padding: px2rem(30);
  font-size: px2rem(32);
  height: 100%;
}
.btn {
  width: 10rem;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  height: px2rem(80);
  line-height: px2rem(80);
  background-color: #66c0f4;
  color: #fff;
}
</style>



